<template>
	<div class="box">
		<div class="search-list"></div>
		<div class="table-area">
			<el-table
				class="list-table"
				:data="tableData"
				:header-cell-style="{
					background: '#113659',
					fontWeight: 400,
					color: '#fff',
				}"
				:header-row-style="{ background: '#113659' }"
				:row-style="{ background: '#0a2641' }"
				:cell-style="{ background: '#0a2641', borderBottom: '1px solid #184168', color: '#fff' }"
			>
				<el-table-column prop="operId" label="日志编号"> </el-table-column>
				<el-table-column prop="title" label="系统模块"> </el-table-column>
				<el-table-column label="操作类型" align="center" prop="businessType">
					<template #default="{ row }">
						<el-tag
							:type="
								row.businessType === 1 ? 'primary' : row.businessType === 2 ? 'normal' : 'danger'
							"
						>
							{{ row.businessType === 1 ? "新增" : row.businessType === 2 ? "修改" : "删除" }}
						</el-tag>
					</template>
				</el-table-column>
				<el-table-column
					label="操作人员"
					align="center"
					prop="operName"
					width="110"
					:show-overflow-tooltip="true"
					sortable="custom"
					:sort-orders="['descending', 'ascending']"
				/>
				<el-table-column
					label="操作地址"
					align="center"
					prop="operIp"
					width="130"
					:show-overflow-tooltip="true"
				/>
				<el-table-column
					label="操作地点"
					align="center"
					prop="operLocation"
					:show-overflow-tooltip="true"
				/>
				<el-table-column label="操作状态" align="center" prop="status">
					<!-- 0成功 1失败 tag -->
					<template #default="{ row }">
						<el-tag :type="row.status === 0 ? 'success' : 'danger'">
							{{ row.status === 0 ? "成功" : "失败" }}
						</el-tag>
					</template>
				</el-table-column>
				<el-table-column
					label="操作日期"
					align="center"
					prop="operTime"
					width="160"
					sortable="custom"
					:sort-orders="['descending', 'ascending']"
				>
				</el-table-column>
				<el-table-column label="操作" align="center">
					<template #default="{ row }">
						<el-button type="primary" link @click="openDialog(row)">详情</el-button>
					</template>
				</el-table-column>
			</el-table>

			<div class="relative top-4">
				<el-pagination
					v-model:current-page="pageNum"
					v-model:page-size="pageSize"
					:page-sizes="[10, 15, 20, 40]"
					layout="->,total, sizes, prev, pager, next"
					:total="total"
					@size-change="handleSizeChange"
					@current-change="handleCurrentChange"
				/>
			</div>
		</div>
		<el-dialog v-model="dialogVisible" title="查看详情" width="30%" :before-close="handleClose">
			暂无详情
			<template #footer>
				<span class="dialog-footer">
					<el-button type="primary" @click="handleClose">确定</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>

<script setup lang="ts">
import { getOperLogList } from "@/api/user";
import { OperLogItem } from "@/api/user/types";
import { ElMessage, ElMessageBox } from "element-plus";
const tableData: Ref<OperLogItem[]> = ref([]);
// 初始化页码
const pageNum = ref(1);
// 初始化页数
const pageSize = ref(10);
const total = ref(0);

// 初始化角色列表
const initOperList = async () => {
	const res = await getOperLogList({
		pageNum: pageNum.value,
		pageSize: pageSize.value,
	});
	tableData.value = res.rows;
	total.value = res.total;
	console.log(res);
};
const handleSizeChange = (val: number) => {
	pageSize.value = val;
	initOperList();
};
const handleCurrentChange = (val: number) => {
	pageNum.value = val;
	initOperList();
};
const handleClose = () => {
	dialogVisible.value = false;
};
onMounted(() => {
	initOperList();
});
const openDialog = (row: OperLogItem) => {
	dialogVisible.value = true;
};
const dialogVisible = ref(false);
</script>

<style lang="scss" scoped>
.search-list {
	margin-bottom: 24px;
}
.list-table {
	--el-table-border-color: none;
	height: 72vh;
	@apply w-full;
	color: #fff;
}
.btn1 {
	width: 123px;
	height: 36px;
	img {
		margin-right: 6px;
	}
}
</style>
